<template>
  <div class="store-list">
    <a-card style="margin-bottom: 10px">
      <div class="card-context">
        <div>
          <SearchOutlined /> <span style="margin-left: 10px">筛选搜索</span>
        </div>
        <div>
          <a-button style="margin-right: 20px">重置</a-button
          ><a-button type="primary">查询结果</a-button>
        </div>
      </div>
      <div style="padding: 20px">
        <a-form layout="inline">
          <a-form-item label="店铺名">
            <a-input placeholder="请输入店铺名" />
          </a-form-item>
          <a-form-item label="负责人姓名">
            <a-input placeholder="请输入负责人姓名" />
          </a-form-item>
        </a-form>
      </div>
    </a-card>

    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      rowKey="storeId"
      bordered
      ellipsis
      style="margin-top: 10px"
    >
      <template #storeRate="{ record }">
        <a-rate v-model:value="record.storeRate" allow-half disabled />
      </template>
      <template #storeState="{ record }">
        <a-tag color="green" v-if="record.storeState == '3'"> 正常 </a-tag>
        <a-tag color="red" v-if="record.storeState == '4'"> 关停 </a-tag>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button
            type="danger"
            size="small"
            v-if="record.storeState == '3'"
            @click="storeClose(record)"
          >
            关停
          </a-button>
          <a-button
            size="small"
            v-if="record.storeState == '4'"
            @click="storeOpen(record)"
          >
            恢复
          </a-button>
        </a-space>
      </template>
      <template #expandedRowRender="{ record }">
        <div class="more-info">
          <a-row :gutter="[16, 24]">
            <a-col :span="6">联系电话:</a-col>
            <a-col :span="6">{{ record.dirTel }}</a-col>
            <a-col :span="6">店铺描述:</a-col>
            <a-col :span="6">{{ record.storeDes }}</a-col>
          </a-row>
          <a-row :gutter="[16, 24]">
            <a-col :span="6">入驻时间:</a-col>
            <a-col :span="6">{{ record.storeCreatTime }}</a-col>
            <a-col :span="6">经营许可证号码:</a-col>
            <a-col :span="6">{{ record.busLicense }}</a-col>
          </a-row>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: "店铺ID",
    dataIndex: "storeId",
    key: "storeId",
    align: "center",
  },
  {
    title: "店铺名称",
    dataIndex: "storeName",
    key: "storeName",
    align: "center",
  },
  {
    title: "负责人名",
    dataIndex: "dirName",
    key: "dir_name",
    align: "center",
  },

  {
    title: "店铺评分",
    dataIndex: "storeRate",
    key: "storeRate",
    align: "center",
    slots: { customRender: "storeRate" },
  },
  {
    title: "店铺状态",
    key: "storeState",
    dataIndex: "storeState",
    align: "center",
    slots: { customRender: "storeState" },
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [];

import { BarsOutlined, SearchOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
export default {
  components: {
    BarsOutlined,
    SearchOutlined,
  },
  data() {
    return {
      data,
      columns,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      this.$axios.get("/admin/store/all").then((res) => {
        this.data = res.data.data;
      });
    },
    //关停店铺
    storeClose(record) {
      this.$axios
        .get("/admin/store/close?storeId=" + record.storeId)
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("操作成功");
            this.getData()
          } else {
            message.error("操作失败");
          }
        });
    },
    //开启店铺
    storeOpen(record) {
        this.$axios
        .get("/admin/store/open?storeId=" + record.storeId)
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("操作成功");
              this.getData()
          } else {
            message.error("操作失败");
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.store-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
</style>